<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性和侦听器</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>计算属性</h3>
			<p>原始信息：{{message}}</p>
			<p>反转信息：{{reverseMessage}}</p>
			<hr >
			
			<h3>侦听器</h3>
			<h4>简单示例</h4>
			用户名：<input type="text" :value="username" />
			
			<h4>基于侦听器实现问答功能</h4>
			请输入您的问题：<input type="text" v-model="question" />
			<br>
			回答：
			<div style="min-height: 50px; border: 1px solid #ccc;">
				<p v-html="answer"></p>
				<img :src="answerImg">
			</div>
			<hr >
		</div>
	</body>
	<!-- 用于发起ajax请求 -->
	<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
	<!-- 用于限制函数调用频次 -->
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
	<script type="text/javascript">
		let vm = new Vue({
			el: '#app',
			data: {
				message: '我为自己是一名中国人而骄傲！',
				username: '小王',
				answer:'',
				answerImg: '',
				question: ''
			},
			created: function(){
				// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
				// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
				// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
				// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
				// 请参考：https://lodash.com/docs#debounce
				this.debouncedSearch = _.debounce(this.search, 500);
			},
			computed: {
				// 声明计算属性
				reverseMessage: function(){
					return this.message.split('').reverse().join('');
				}
			},
			watch: {
				username: function(newVal, oldVal){
					console.log('username的值发生了变化，新值:' + newVal+'，旧值：' + oldVal);
				},
				question: function(val){
					this.answer = '录入中...';
					this.debouncedSearch();
				}
			},
			methods: {
				search: function(){
					this.answer = '思考中...';
					let _this = this;
					axios.get('https://yesno.wtf/api')
						.then(function(resp){
							_this.answer = _.capitalize(resp.data.answer);  // 将首字母转成大写，其余字符转成小写
							_this.answerImg = resp.data.image;
						})
						.catch(function(error){
							_this.answer = '出错了，' + error;
						});
				}
			}
		});
	</script>
</html>
